<template>
	<div class="home">
		<!--搜索-->
		<van-search v-model="searchValue"
					shape="round"
					placeholder="请输入搜索关键词"
					disabled
					@click="handleClickSearch" />
		<!--轮播图-->
		<van-swipe class="my-swipe"
				   :autoplay="3000"
				   indicator-color="0000FF">
			<van-swipe-item v-for="item in banner"
							:key="item.id">
				<img :src="item.image_url"
					 alt=""
					 width="100%">
			</van-swipe-item>
		</van-swipe>

    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
		

		<div v-show="$route.path === '/home'">
			<!--搜索动画效果-->
			<transition name="van-slide-right">
				<router-view />
			</transition>

			<!-- 图标导航 -->
			<div>
				<van-grid>
					<van-grid-item v-for="item in channel"
								   :key="item.id"
								   :icon="item.icon_url"
								   :text="item.name"
								   @click="navClick(item.id)" />
				</van-grid>
			</div>

			<!-- 品牌制造商 -->
			<div class="facture">
				<h4>品牌制造商直供</h4>
				<ul>
					<li v-for="item in brandList"
						:key="item.id"
						@click="$router.push('/brand?id=' + item.id)">
						<img :src="item.pic_url"
							 alt=""
							 width="100%">
						<h3>{{item.name}}</h3>
						<p>{{item.floor_price | RMBformat}}</p>
					</li>
				</ul>
			</div>

			<!-- 新品 -->
			<div class="newProduct">
				<h4>周一周四 • 新品首发</h4>
				<ul>
					<li v-for="item in newGoodsList"
						:key=item.id
						@click="$router.push('/pruductDetail?id=' + item.id)">
						<img :src="item.list_pic_url"
							 alt=""
							 width="100%">
						<div>{{item.name}}</div>
						<p>{{item.retail_price | RMBformat}}</p>
					</li>
				</ul>
			</div>

			<!-- 人气推荐 -->
			<div class="hotGoodsList">
				<h4>人气推荐</h4>
				<van-card v-for="item in hotGoodsList"
						  :key="item.id"
						  currency
						  :price="item.retail_price | RMBformat"
						  :desc="item.goods_brief"
						  :title="item.name"
						  :thumb="item.list_pic_url" />
			</div>

			<!-- 精选专题 -->
			<div class="topic">
				<h4>精选专题</h4>
				<van-swipe class="my-swipe"
						   :show-indicators="false"
						   indicator-color="white">
					<van-swipe-item v-for="item in topicList"
									:key="item.id">
						<img :src="item.scene_pic_url"
							 alt=""
							 width="100%"
							 style="display: block">
						<h2>{{item.title}}</h2>
						<div class="subtitle">{{item.subtitle}}</div>
						<p style="color: darkred">{{item.price_info | RMBformat}}</p>
					</van-swipe-item>
				</van-swipe>
			</div>

			<!-- 产品列表 -->
			<div class="category"
				 v-for="item in categoryList"
				 :key="item.id">
				<h4>{{item.name}}</h4>
				<Products :goodsList="item.goodsList" />
			</div>
		</div>

	</div>

</template>

<script>
import Products from "@/components/homeComp/Products"
import { getHomeList } from "@/network/api";
export default {
	name: 'Home',
	created() {
		this.getHomeList()
	},
	components: { Products },
	data() {
		return {
			// 搜索框数据绑定
			searchValue: '',
			// 轮播图数组
			banner: [],
			// 图标导航数据
			channel: [],
			// 品牌制造商数据
			brandList: [],
			// 新品数据
			newGoodsList: [],

			// 人气推荐
			hotGoodsList: [],

			// 精选专题
			topicList: [],

			categoryList: [],

			goodsList: []
		}
	},
	methods: {
		// 导航图标点击事件
		navClick(id) {
			this.$router.push('/channel?id=' + id)
		},
		// 获取首页数据
		getHomeList() {
			getHomeList().then(res => {
				if (res.errno === 0) {
					// console.log(res)
					this.banner = res.data.banner
					this.channel = res.data.channel
					this.brandList = res.data.brandList
					this.newGoodsList = res.data.newGoodsList
					this.hotGoodsList = res.data.hotGoodsList
					this.topicList = res.data.topicList
					this.categoryList = res.data.categoryList
					// console.log(this.topicList);
				}
			})
		},
		// 搜索框事件
		// searchClick() {
		//   this.$router.push('/home/popup')
		// }
		handleClickSearch() {
      console.log(this.$route);
			this.$router.push('/home/popup')
		}
	}
}
</script>

<style lang="less" scoped>
/*.slide-enter,.slide-leave-to {*/
/*  // 过渡开始之前与离开之后的样式*/
/*  right: -100%;*/
/*}*/
/*.slide-enter-active,.slide-leave-active {*/
/*  // 过渡开始与离开的过渡效果写在这里*/
/*  transition: all .4s;*/
/*}*/
/*.slide-enter-to,.slide-leave {*/
/*  // 过渡结束之后，与离开之前的样式*/
/*  right: 0;*/
/*}*/
.popup-shadow {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
.van-grid {
	display: flex;
	flex-wrap: nowrap;
}
.facture {
	background: #fff;
	margin: 0.2rem 0;
	h4 {
		height: 0.5rem;
		line-height: 0.5rem;
		font-size: 0.18rem;
		text-align: center;
	}
	ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		li {
			width: 49%;
			position: relative;
			h3 {
				position: absolute;
				top: 0.1rem;
				left: 0.1rem;
			}
			p {
				position: absolute;
				top: 0.4rem;
				left: 0.1rem;
				color: #8b0000;
			}
		}
	}
}

.newProduct {
	background-color: #fff;
	h4 {
		font-size: 0.16rem;
		text-align: center;
		height: 0.5rem;
		line-height: 0.5rem;
	}
	ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0.15rem;
		box-sizing: border-box;
		width: 100%;
		li {
			width: 49%;
			text-align: center;
			margin-bottom: 0.1rem;
			img {
				display: block;
			}
			p {
				margin-top: 0.1rem;
				color: darkred;
			}
		}
	}
}

.hotGoodsList {
	background: #fff;
	margin-top: 0.1rem;
	h4 {
		font-size: 0.16rem;
		text-align: center;
		height: 0.5rem;
		line-height: 0.5rem;
	}
	.van-card__title {
		font-size: 0.16rem;
		color: #000;
		font-weight: 520;
		margin-bottom: 0.12rem;
	}
	.van-card__price {
		color: #8b0000;
	}
}

.topic {
	background-color: #fff;
	margin-top: 0.18rem;
	h4 {
		height: 0.5rem;
		line-height: 0.5rem;
		font-size: 0.16rem;
		font-weight: 520;
		text-align: center;
	}
}

.my-swipe {
	height: 100%;

	img {
		width: 100%;
		height: 2.2rem;
	}
	h2 {
		font-size: 0.15rem;
	}
	.subtitle {
		color: #666;
	}

	h2,
	p,
	.subtitle {
		// width: 2.7rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: center;
		padding: 0.1rem;
	}
}

.category {
	background-color: #fff;
	margin-top: 0.2rem;
	h4 {
		height: 0.5rem;
		line-height: 0.5rem;
		font-size: 0.16rem;
		font-weight: 520;
		text-align: center;
	}
}
</style>
